<template>
  <div class="addbox">
    <div class="boxHeader">
      <p>编辑</p>
      <i class="el-icon-close" @click="closeAddBox"></i>
    </div>
    <div class="addMainBox">
      <label class="Correlation">
        <p class="select">选择类目 ：</p>
         <el-select v-model="additemType" clearable>
          <el-option
            v-for="item in this.$store.state.file.uploadItemList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
            @click.native="selectUploadItem(item)"
          >{{item.name}}</el-option>
        </el-select>
      </label>
    </div>
    <footer>
      <div class="cancel" @click="closeAddBox">取消</div>
      <div class="determainAdd" @click="determainAdd">确定</div>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      additemType: '',
      itemIndex: 1,
      // 项目id
      id: 1,
      learningDTO: {},
      learningId: '',
      pageSize: 10
    }
  },
  props: {
    editInfo: Object
  },
  methods: {
  // 获取弹框内项目类目列表
    closeAddBox () {
      this.$store.state.ifShowCover = false
      this.$store.state.showEditBox = false
    },
    updateTabList () {
      const params = {
        pageSize: this.pageSize,
        id: this.id,
        fileName: this.documentName,
        index: this.itemIndex,
        itemid: this.itemid
      }
      this.$store.dispatch('file/updateTableList', params)
    },
    determainAdd () {
      const updateParams = {
        learningDTO: this.learningDTO,
        learningId: this.learningId
      }
      this.$store.dispatch('file/upDateTableData', updateParams).then(res => {
        if (res.data.code === 200) {
          this.$store.state.ifShowCover = false
          this.$store.state.showEditBox = false
          this.$message({
            message: '编辑成功',
            type: 'success',
            duration: 500
          })
          this.$emit('confirmEdit')
          this.updateTabList()
        }
      })
    },
    // 选择编辑得类目
    selectUploadItem (item) {
      // // console.log(item)
      this.learningDTO.typeId = item.id
      this.learningDTO.docTitle = this.editInfo.docTitle
      this.learningDTO.docUrl = this.editInfo.docUrl
      this.learningDTO.isExperts = this.editInfo.isExperts
      this.learningId = this.editInfo.learnId
    }

  },
  created () {
    this.additemType = this.editInfo.typeName
    // console.log(this.editInfo)
  }
}
</script>

<style scoped lang="scss">
.addMainBox {
  position: relative;
  .Correlation {
    .select {
      position: absolute;
      width: 168px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: right;
      top: 53px;
      left: 42px;
    }
    .select::before {
      content: "*";
      color: #4868ff;
    }
    .el-select {
      width: 400px;
      height: 48px;
      position: absolute;
      top: 45px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
@import "@/styles/clickBox.scss";
</style>
